<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="js/jquery-3.5.1.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <link rel="icon" href="images/12.ico">
    <title>任务管理账号注册</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            min-height: 100vh;
            background: linear-gradient(#d973f1, #ffb8e8);
        }
        #reset{
            margin-left: 25px;
        }

        .login-box {
            width: 400px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            padding: 40px;
            background: rgba(0, 0, 0, 0.5);
            box-sizing: border-box;
            box-shadow: 0 15px 25px rgba(0, 0, 0, 0.6);
            border-radius: 10px;
        }

        .login-box h2 {
            margin: 0 0 40px;
            padding: 0;
            color: #fff;
            text-align: center;
        }

        .login-box .user-box {
            position: relative;
        }

        .login-box .user-box input {
            width: 100%;
            padding: 10px 0;
            font-size: 16px;
            color: #fff;
            margin-bottom: 30px;
            border: none;
            border-bottom: 1px solid #fff;
            background: transparent;
            border-radius: 5px;
            outline: none;
        }

        .login-box .user-box label {
            position: absolute;
            top: 0;
            left: 0;
            padding: 10px 0;
            color: #fff;
            font-size: 16px;
            pointer-events: none;
            transition: 0.5s;
        }

        .login-box .user-box input:focus ~ label,
        .login-box .user-box input:valid ~ label {
            top: -30px;
            left: -20px;
            color: #03e9f4;
            font-size: 12px;
        }

        .login-box form a {
            position: relative;
            display: inline-block;
            padding: 10px 40px;
            color: #03e9f4;
            text-decoration: none;
            font-size: 16px;
            margin-top: 40px;
            letter-spacing: 4px;
            text-indent: 4px;
            transition: 0.5s;
            overflow: hidden;
        }

        .login-box form a:hover {
            background: #03e9f4;
            color: #fff;
            border-radius: 5px;
            box-shadow: 0 0 5px #03e9f4, 0 0 25px #03e9f4, 0 0 50px #03e9f4, 0 0 100px #03e9f4;
        }

        .login-box form a span {
            position: absolute;
            display: block;
        }

        .login-box form a span:nth-child(1) {
            top: 0;
            left: -100%;
            width: 100%;
            height: 2px;
            background: linear-gradient(90deg, transparent, #03e9f4);
            animation: btn-anim1 1s linear infinite;
        }

        @keyframes btn-anim1 {
            0% {
                left: -100%;
            }
            50%, 100% {
                left: 100%;
            }
        }

        .login-box form a span:nth-child(2) {
            top: -100%;
            right: 0;
            width: 2px;
            height: 100%;
            background: linear-gradient(180deg, transparent, #03e9f4);
            /* 执行动画：动画名 时长 线性的 循环的 */
            animation: btn-anim2 1s linear infinite;
            /* 动画延迟时间 */
            animation-delay: 0.25s;
        }

        @keyframes btn-anim2 {
            0% {
                top: -100%;
            }
            50%, 100% {
                top: 100%;
            }
        }

        .login-box form a span:nth-child(3) {
            bottom: 0;
            right: -100%;
            width: 100%;
            height: 2px;
            background: linear-gradient(270deg, transparent, #03e9f4);
            animation: btn-anim3 1s linear infinite;
            animation-delay: 0.5s;
        }

        @keyframes btn-anim3 {
            0% {
                right: -100%;
            }
            50%, 100% {
                right: 100%;
            }
        }

        .login-box form a span:nth-child(4) {
            bottom: -100%;
            left: 0;
            width: 2px;
            height: 100%;
            background: linear-gradient(360deg, transparent, #03e9f4);
            animation: btn-anim4 1s linear infinite;
            animation-delay: 0.75s;
        }

        @keyframes btn-anim4 {
            0% {
                bottom: -100%;
            }
            50%, 100% {
                bottom: 100%;
            }
        }
        input[type=radio] {
            transform: scale(2);
        }
        input[type=radio] + label {
            margin-left: 10px
        }

    </style>
</head>
<script>
    // 页面加载完成后，检查是否有错误信息，如果有，弹出提示框
    let errorMessage = '${error}';
    if (errorMessage) {
        let b = confirm(errorMessage);
        if (b) {
            <%
                request.removeAttribute("error");
            %>
        }
    }
</script>
<body>
<%--    引入导航--%>
<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">切换导航</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="getTask.jsp" target="_parent">首页·计划管理</a>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li><a target="_parent" href="TaskLineServlet">任务成就</a></li>
                <li><a target="_parent" href="ProSpectServlet?what=query">布局·规划</a></li>
                <li><a target="_parent" href="URLServlet?what=query">重要网址</a></li>
                <li><a target="_parent" href="NoteServlet?what=query">重要记事</a></li>
                <li><a target="_parent" href="mottos.jsp">感悟·格言</a></li>
                <li><a target="_parent" href="bookNotes.jsp">读书笔记</a></li>
            </ul>
            <form class="navbar-form navbar-left" role="search">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Search">
                </div>
                <button type="submit" class="btn btn-default">搜索</button>
            </form>
            <ul class="nav navbar-nav navbar-right">
                <li><a target="_parent" href="login.jsp">${uname==null?"登录":uname}</a></li>
                <li><a target="_parent" href="regist.jsp">注册</a></li>
                <li><a target="_parent" href="#">会员中心</a></li>
                <li><a target="_parent" href="Contact_us.jsp">联系我们</a></li>

            </ul>
        </div>
    </div>
</nav>
<br>

<div class="login-box">
    <h2>用户注册</h2>
    <form method="post" action="RegistServlet">
        <div class="user-box">
            <input type="text" placeholder="请输入账号" required name="name" id="name">
            <label>账号</label>
        </div>
        <div class="user-box">
            <input type="password" placeholder="请输入密码" required name="pwd" id="pwd">
            <label>密码</label>
        </div>
        <div class="user-box">
            <input type="password" required name="rpwd" id="rpwd">
            <label>重复密码</label>
        </div>
        <div style="color: white;font-size: 22px;text-align: center">
            <input type="radio" checked name="sex" value="1" id="sex1"> <label for="sex1"> 男</label>
            <input style="margin-left: 20px" type="radio" name="sex" value="0" id="sex2"> <label for="sex2"> 女</label>
        </div>
        <div class="user-box">
            <input type="text" required name="phone" id="phone">
            <label>手机号</label>
        </div>
        <a href="#" id="submit">
            <span></span><span></span><span></span><span></span>
            注册
        </a>
        <a href="#" id="reset">
            <span></span><span></span><span></span><span></span>
            重新输入
        </a>
    </form>
</div>

<footer  class="navbar navbar-fixed-bottom navbar-inverse navbar-brand  text-center"
         style="color: yellow; font-size: 14px">
    <!--                <a target="_blank" href="#">友情链接</a>-->
    <a target="_blank" href="https://beian.miit.gov.cn">京ICP备2024085356号</a>
    | <a target="_self" href="#"> &copy; 2024 凡尘先生 </a>
</footer>

</body>
<script>

    $("#name").blur(function () {
        let name = $(this).val();
        if (name == "") {
            alert("输入的用户名不能为空！");
        } else {  //不为空，则异步请求服务器，校验账号是否可用。 用jquery封装的ajax
            $.ajax({
                url: "CheckServlet",
                type: "POST",
                data: {"name": name},
                dataType: "text",
                success: function (result) {
                    if (result == "true") {
                        alert("账号已被注册，不可使用！");
                        $("#name").val("")
                    }
                },
                error: function () {
                    alert("请检查你的网络!");
                }
            });
        }
    });

    $("#submit").click(function () {
        let $name = $("#name").val();
        let $pwd = $("#pwd").val();
        if ($name === "") {
            alert("用户名不能为空");
            return false;
        }
        if ($pwd.length < 8) {
            alert("密码长度至少八位");
            return false;
        }
        if ($pwd !== $("#rpwd").val()) {
            alert("两次密码不一致");
            return false;
        }
        let reg = /^(?:(?:\+|00)86)?1(?:(?:3\d)|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8\d)|(?:9[189]))\d{8}$/;

        if (!reg.test($("#phone").val())) {
            alert("手机号格式错误");
            return false;
        }
        $("form").submit();
        return true;
    })
    $("#reset").click(function () {
        location.reload();
    });

    $(".navbar-toggle").click(function() {
        $("#bs-example-navbar-collapse-1").collapse('toggle');
    });
</script>
</html>